<!--  -->
<template>
  <!-- <transition enter-active-class="animate__animated animate__backInDown"
  leave-active-class="animate__animated animate__backOutDown"> -->
    <div class="search">
      <van-search
      v-model="value"
      show-action
      :placeholder="keyword"
      @search="getSearchReaults"
      @cancel="onCancel"
      @clear="clearInput"
    />
    <HistoryKeywordList :historyKeywordList="searchData.historyKeywordList" @getSearchReault="getSearchReaults" @clear="clear" v-if="searchData.searchResult.length === 0"></HistoryKeywordList>
    <HotKeywordList :hotKeywordList="searchData.hotKeywordList" @getSearchReault="getSearchReaults" v-if="searchData.searchResult.length === 0"></HotKeywordList>  
    <SearchResult :filterCategory="searchData.filterCategory" :searchResult="searchData.searchResult" v-if="searchData.searchResult.length !== 0" @onchange="onchange"></SearchResult>
  </div>
  <!-- </transition> -->
   
</template>

<script setup>
import { Toast } from 'vant';
import HistoryKeywordList from './components/historyKeywordList.vue'
import HotKeywordList from './components/hotKeywordList.vue'
import SearchResult from './components/searchResult.vue'
import {getSearchData,getSearchResult, clearHistory} from '@/api/api.ts'
import {ref, reactive,onMounted} from 'vue'
import {useRouter} from 'vue-router'
let value = ref('')
const keyword = ref('')
const router = useRouter()
// 搜索数据
const searchData = reactive({
  // 历史记录
  historyKeywordList: [],
  // 热门搜索
  hotKeywordList: [],
  // 搜索结果
  searchResult: [],
  // 搜索结果分类
  filterCategory: []
})

// 获取搜索结果
const getSearchReaults = async (params) => {
  value.value = params
  const res = await getSearchResult(params)
  console.log(res);
  searchData.searchResult = res.data.data
  searchData.filterCategory = res.data.filterCategory
  if (searchData.searchResult.length === 0) {
    console.log('没有数据');
    Toast.fail('没有您搜索的商品');
  }
}
const getSearchDatas = () => {
  getSearchData().then(res => {
    console.log(res);
    keyword.value = res.data.defaultKeyword.keyword
    searchData.historyKeywordList = res.data.historyKeywordList
    searchData.hotKeywordList = res.data.hotKeywordList
  })
  
}
const clear = () => {
  clearHistory().then(res => {
    console.log(res);
    if (res.errno === 0) {
      Toast.success('清除成功');
    }
    getSearchDatas()
  })
}
const clearInput = () => {
  searchData.searchResult = []
}
const onchange = (value) => {
  // console.log(value);
  // console.log(searchData.searchResult);
  if (value === 0) {
    searchData.searchResult.sort((a, b ) => {
    return a.retail_price - b.retail_price
  })
  }else {
    searchData.searchResult.sort((a, b ) => {
    return b.retail_price - a.retail_price
    })
  }
}
// 数据
onMounted(() => {
  
  getSearchDatas()
})
// const onSearch = async () => {
//   const res = await getSearchResult(value.value)
//   searchData.searchResult = res.data.data
// }
const onCancel = () => {
  router.go(-1)
}
</script>

<style lang="scss" scoped>
  
</style>